<template>
  <view>
    <view class="cinema-top">
      <view style="display: flex">
        <view>
          <uni-icons
            type="left"
            size="24"
            @click="goBack()"
            style="margin-right: 20rpx"
          ></uni-icons>
        </view>
        <view class="tops-item">
          <view class="cinema-img">
            <image :src="movie_info.posterUrl"></image>
          </view>
          <view class="cinema-info">
            <view class="top-name">{{ movie_info.movieName }}</view>
            <view class="top-name">{{ movie_info.movieType }}</view>
            <view class="top-name">{{ movie_info.filmName }}</view>
            <!--<view class="list-tel">{{ dataInfo.movie_info.publishTime.slice(0,15) }}</view>-->
            <view class="list-tel">{{ officeInfo.cinemaName }}</view>
            <view class="list-tel">{{ officeInfo.hallName }}</view>
          </view>
        </view>
      </view>
    </view>

    <view class="cinema-main">
      <view class="support">
        <image src="../../static/images/moive-no-close.png"></image>
        <text>不支持退票</text>
        <image
          src="../../static/images/moive-no-close.png"
          style="margin-left: 60rpx"
        ></image>
        <text>不支持改签</text>
      </view>

      <view class="seat-item">
        <view class="seat-text">座位</view>
        <view class="seat-val">
          <text v-for="(value, index) in dataInfo.showInfor" :key="index"
            >{{ value.seatName }},</text
          >
        </view>
      </view>
      <!-- <view class="automatic-item">
				<view>
					<view class="aut-tops">
						<text>自动调座</text>
						<image src="../../static/images/moive-yiwens.png" @click="show = true"></image>
					</view>
					<view class="aut-tips">所选座位已售时，系统自动调至最佳观影座位</view>
				</view>
				<switch @change="switch2Change" color="#FE602B" :checked="false" style="transform:scale(0.8);margin-left: auto;"/>
			</view> -->

      <view class="lines"></view>

      <view class="price-item">
        <!-- <view class="pirce-list">
					<view class="pirce-text">市场价</view>
					<view class="pirce-val">¥ {{dataInfo.original_price}}</view>
				</view> -->
        <!-- <view class="pirce-list">
					<view class="pirce-text">积分抵扣</view>
					<view class="pirce-vals">- ¥0</view>
				</view> -->
        <view class="pirce-list">
          <view class="pirce-text"
            >票价合计(共{{ dataInfo.showInfor.length }}张）</view
          >
          <view class="pirce-valss"
            >¥{{ dataInfo.original_price.toFixed(2) }}</view
          >
        </view>
        <view
          v-if="enable != 0"
          style="display: flex; justify-content: space-between"
        >
          <view>
            <span>积分：</span>
            <span style="font-size: 24rpx; color: gray"
              >当前共{{ totalpoints }}积分,可抵扣{{ amountprice }}元</span
            >
          </view>
          <checkbox-group @change="onCheckboxChange">
            <label class="checkbox-label">
              <checkbox
                class="checkbox"
                value="1"
                style="transform: scale(0.7)"
              />
              <span style="font-size: 24rpx; color: gray">使用积分</span>
            </label>
          </checkbox-group>
        </view>
      </view>
      <view class="lines"></view>
      <!-- <view class="price-item">
				<view class="pirce-list">
					<view class="pirce-text">预计出票时间</view>
					<view class="pirce-val">{{dataInfo.estimate_time}}</view>
				</view>
				<view class="order-phone-item">
					<view style="width: 68%;">
						<view class="pho-text">手机号码</view>
						<view class="phone-tips">请正确填写，取票码将通过短信发送</view>
					</view>
					<input placeholder="请输入手机号码" class="phone-input" v-model="phone"/>
				</view>
			</view> -->
      <view class="lines"></view>

      <view class="ticket-notice">
        <view class="not-text">购票须知</view>
        <view class="not-list">
          <view class="list-num">1、</view>
          <view class="not-conot"
            >根据中国电影发行放映协会通知，影院需实名登记观众信息，以及体温测量，未佩戴口罩以及体温在37.3度以上不得入内。入场前请做好上诉准备，以免影响观影。</view
          >
        </view>
        <view class="not-list">
          <view class="list-num">2、</view>
          <view class="not-conot"
            >特价电影票，购买成功后将<text>不可退款、改签</text>。支付前务必确认影院、影片、场次准备无误。</view
          >
        </view>
        <view class="not-list">
          <view class="list-num">3、</view>
          <view class="not-conot"
            ><text>出票时间为9:00~23:30</text
            >,支付完成后20~60分钟完成出票，非出票时间的订单需等待至出票时间方可出票。</view
          >
        </view>
        <view class="not-list">
          <view class="list-num">4、</view>
          <view class="not-conot"
            >若不能出票或者所选座位已售且不接受座位调整，订单将会在<text>24~72</text>小时内自动退款。</view
          >
        </view>
      </view>

      <!-- 	<view class="agreement">
				<image src="../../static/images/moive-no-select.png"></image>
				<text>我已阅读并同意购票须知</text>
			</view> -->
    </view>

    <view class="congirm-boom-nav">
      <view class="nav-lefts">
        <text class="shiji">实际付款</text>
        <text class="units">￥</text>
        <text class="shiji-val">{{ dataInfo.original_price.toFixed(2) }}</text>
      </view>
      <view class="go-pay" @click="goPay">去支付</view>
    </view>

    <!-- 调座规则弹窗 -->
    <u-popup
      v-model="show"
      mode="center"
      border-radius="20"
      width="600"
      :closeable="true"
    >
      <view class="rule-title">调座规则</view>
      <view class="rule-content">
        第三方服务商出票，由于出票过程存在时间差，可能存在已选座位被占情况。为了不耽误您的时间，我们将按照优先选取从（银幕中央-核心区域-边缘）的顺序为您调换座位。购买多张票将继续为您的座位保持连座。
      </view>
    </u-popup>
  </view>
</template>

<script>
// import {getOrderInfo,updateOrder} from "@/api/film.js"
import sheep from "@/sheep";
export default {
  data() {
    return {
      show: false,
      movie_info: {
        publishTime: "2025-01-29 00:00:00",
      },
      officeInfo: {},
      dataInfo: {
        price: "45",
        original_price: "68",
        movie_info: {
          posterUrl:
            "https://gw.alicdn.com/i1/O1CN01sSmj2b1daSm6IAUcs_!!6000000003752-0-alipicbeacon.jpg_480x480Q30s150.jpg",
          cast: "吴京 易烊千玺 段奕宏 张涵予 朱亚文 李晨 韩东君 耿乐 杜淳",
          director: "徐克",
          movie_name: "长津湖之水门桥",
          movieType: "剧情|历史|战争",
          time: "2022-5-14 17:42",
          cinemaName: "博纳电影院线·星鑫古汉店",
          hallName: "5号激光厅国语",
        },
        showInfor: [],
      },
      phone: "",
      isAccord: false,
      cinemaId: 0,
      orderCheckDetail: {},
      totalpoints: "", //总积分
      amountprice: "", //积分钱
      selectedValue: false, // 初始状态为不选中
      enable: null,
      pointsDeduction: 0,
    };
  },
  onLoad(opt) {
    console.log(opt, "opt");
    const prm = JSON.parse(decodeURIComponent(opt.prm));
    console.log("prm", prm);
    this.movie_info = prm.movieInfo;
    this.cinemaId = prm.cinemaId;
    this.officeInfo = prm.officeInfo;
    this.dataInfo.showInfor = prm.showInfor;
    this.dataInfo.original_price = prm.price;
    this.dataInfo.price = prm.price;
    // this.movieOrderCheck()
    this.getIntegral();
    this.movieAddCheck();
  },
  methods: {
    goBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
    async getIntegral() {
      const data = await sheep.$api.order.getIntegral({});
      this.totalpoints = data.data.integral;
      this.amountprice = data.data.pointsDeduction;
      this.enable = data.data.enable;

      console.log(enable.value, "enable.value");
    },
    onCheckboxChange(event) {
      const value = event.detail.value;
      this.selectedValue = value.length > 0; // 如果有选中的值，则为 true，否则为 false
      console.log("选中的值:", this.selectedValue);
      if (this.selectedValue) {
        this.dataInfo.original_price = parseFloat(
          (this.dataInfo.original_price - this.amountprice).toFixed(2)
        );
        this.pointsDeduction = 1;
        console.log("111", this.dataInfo.original_price);
      } else {
        this.dataInfo.original_price = parseFloat(
          (this.dataInfo.original_price + this.amountprice).toFixed(2)
        );
        this.pointsDeduction = 0;
        console.log("222");
      }
    },

    async movieAddCheck() {
      const params = {
        cinemaId: this.cinemaId,
        movieId: this.movie_info.id,
        seats: this.dataInfo.showInfor,
        showId: this.officeInfo.id,
        changeSeat: "1",
        matchChannel: "7",
        slaveMatchChannel: "7",
        cityCode: uni.getStorageSync("map").id,
      };
      console.log(params);
      const res = await sheep.$api.movie.movieAddCheck(params);
    },
    async movieOrderCheck(orderNo) {
      const params = {
        cinemaId: this.cinemaId,
        movieId: this.movie_info.id,
        seats: this.dataInfo.showInfor,
        showId: this.officeInfo.id,
        changeSeat: "1",
        matchChannel: "7",
        slaveMatchChannel: "7",
        cityCode: uni.getStorageSync("map").id,
      };
      console.log("params", params);
      const res = await sheep.$api.movie.payMovieOrderCheck(params);
      this.orderCheckDetail = res.data;
      console.log(res);
    },
    switch2Change(e) {
      console.log(e);
      this.isAccord = e.detail.value;
    },
    async goPay() {
      // if(this.phone==''){
      // 	uni.showToast({
      // 		title:'请输入手机号码',
      // 		icon:'none'
      // 	})
      // 	return false
      // }
      // let reg = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57]|19[0-9]|16[0-9])[0-9]{8}$/;
      // if(!reg.test(this.phone)){
      // 	uni.showToast({
      // 		title:'手机号码格式不正确',
      // 		icon:'none'
      // 	})
      // 	return false
      // }
      console.log();
      const params = {
        cinemaId: this.cinemaId,
        movieId: this.movie_info.id,
        seats: this.dataInfo.showInfor,
        showId: this.officeInfo.id,
        changeSeat: "1",
        matchChannel: "7",
        slaveMatchChannel: "7",
        cityCode: uni.getStorageSync("map").id,
        pointsDeduction: this.pointsDeduction,
      };
      console.log("params", params);
      const res = await sheep.$api.movie.payMovieAddOrder(params);
      if (res.code === 200) {
        uni.navigateTo({
          url: `/pages/movie/pay?orderNumber=${res.data}`,
        });
      }
      console.log(res);
    },
  },
};
</script>

<style lang="scss" scoped>
page {
}
.cinema-top {
  background-color: #636775;
  padding: 90rpx 32rpx 70rpx 20rpx;
  position: relative;
  .tops-item {
    display: flex;
    align-items: center;
    z-index: 9999;
  }
  .cinema-img {
    width: 160rpx;
    height: 222rpx;
    image {
      width: 160rpx;
      height: 222rpx;
      border-radius: 20rpx;
    }
  }
  .cinema-info {
    margin-left: 30rpx;
    .top-name {
      color: #ffffff;
      font-size: 32rpx;
      font-weight: 600;
    }
    .list-tel {
      color: #d8d8dd;
      font-size: 24rpx;
      margin-top: 10rpx;
    }
  }
}
.cinema-main {
  position: absolute;
  top: 332rpx;
  left: 0;
  right: 0;
  background-color: #ffffff;
  border-radius: 30rpx 30rpx 0rpx 0rpx;
  padding-bottom: 120rpx;
}
.support {
  margin: 40rpx 32rpx 0rpx 32rpx;
  background-color: #ffefee;
  border-radius: 8rpx;
  padding: 22rpx 25rpx;
  display: flex;
  align-items: center;
  image {
    width: 28rpx;
    height: 28rpx;
  }
  text {
    color: #f03d38;
    font-size: 24rpx;
    margin-left: 12rpx;
  }
}
.seat-item {
  margin: 50rpx 32rpx 9rpx 32rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 28rpx;
  .seat-text {
    color: #636775;
  }
  .seat-val {
    color: #2d3039;
  }
}
.automatic-item {
  padding: 32rpx;
  display: flex;
  align-items: center;
  .aut-tops {
    display: flex;
    align-items: center;
    image {
      width: 28rpx;
      height: 28rpx;
      margin-left: 16rpx;
    }
    text {
      color: #636775;
      font-size: 28rpx;
    }
  }
  .aut-tips {
    margin-top: 4rpx;
    color: #fe602b;
    font-size: 24rpx;
  }
}
.lines {
  height: 20rpx;
  background-color: #f3f4f7;
}
.price-item {
  background-color: #ffffff;
  padding: 20rpx 32rpx;
  .pirce-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 0rpx;
    font-size: 28rpx;
    .pirce-text {
      color: #636775;
    }
    .pirce-val {
      color: #2d3039;
    }
    .pirce-vals {
      color: #fe602b;
    }
    .pirce-valss {
      color: #fe602b;
      font-weight: 550;
    }
  }
}
.order-phone-item {
  padding: 20rpx 0rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .pho-text {
    color: #636775;
    font-size: 29rpx;
  }
  .phone-tips {
    margin-top: 4rpx;
    color: #a6a8ae;
    font-size: 24rpx;
  }
  .phone-input {
    font-size: 28rpx;
    width: 32%;
  }
}
.ticket-notice {
  padding: 40rpx 56rpx 40rpx 32rpx;
  background-color: #ffffff;
  .not-text {
    color: #2d3039;
    font-size: 28rpx;
    font-weight: 550;
  }
  .not-list {
    display: flex;
    margin-top: 20rpx;
    color: #636775;
    font-size: 28rpx;
    text {
      color: #f03d38;
      font-weight: 550;
    }
  }
}
.agreement {
  display: flex;
  align-items: center;
  background-color: #f2f5fa;
  padding: 24rpx 30rpx;
  image {
    width: 32rpx;
    height: 32rpx;
  }
  text {
    color: #2d3039;
    font-size: 24rpx;
    margin-left: 10rpx;
  }
}
.congirm-boom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 120rpx;
  z-index: 9999;
  padding-left: 48rpx;
  padding-right: 40rpx;
  .nav-lefts {
    display: flex;
    align-items: center;
    .shiji {
      color: #636775;
      font-size: 24rpx;
      margin-top: 4rpx;
    }
    .units {
      color: #fe602b;
      font-size: 28rpx;
      font-weight: 550;
      margin-left: 18rpx;
      margin-top: 4rpx;
    }
    .shiji-val {
      color: #fe602b;
      font-size: 42rpx;
      font-weight: 550;
    }
  }
  .go-pay {
    width: 230rpx;
    height: 92rpx;
    text-align: center;
    line-height: 92rpx;
    background-color: #fe602b;
    border-radius: 46rpx;
    color: #ffffff;
    font-size: 32rpx;
    font-weight: 600;
  }
}
.rule-title {
  text-align: center;
  padding-top: 30rpx;
  color: #292928;
  font-size: 36rpx;
  font-weight: 550;
}
.rule-content {
  padding: 35rpx 35rpx 50rpx 35rpx;
  color: #636775;
  font-size: 28rpx;
  line-height: 46rpx;
}
</style>
